<template>
  <van-row>
    <van-form @submit="onSubmit">
      <van-row>
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        </van-nav-bar>
        <van-field v-model="title" label="标题" />
        <van-field v-model="description" label="描述" type="textarea" />
        <van-field name="rate" label="等级">
          <template #input>
            <van-rate v-model="level" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
          </template>
        </van-field>
        <van-field label="图片" readonly>
          <template #input>
            <van-uploader v-model="uploadFileList" multiple :after-read="afterread" />
          </template>
        </van-field>
        <van-field readonly clickable name="endDate" :value="endDate" label="截至日期" placeholder="点击选择日期"
          @click="showEndDate = true" />
        <van-calendar v-model="showEndDate" @confirm="onConfirmEndDate" />
      </van-row>
      <van-row>
        <van-col :span="24">
          <van-field readonly clickable name="appointUser" :value="appointUser" label="指派用户" placeholder="请选择用户"
            @click="showPicker = true" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="columns" @confirm="onConfirmAppointUser" @cancel="showPicker = false" />
          </van-popup>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="24">
          <van-button round block type="info" native-type="submit" :loading="loading">
            提交
          </van-button>
        </van-col>
      </van-row>
    </van-form>
  </van-row>
</template>

<script>
  import {
    Form,
    Row,
    Field,
    Button,
    Rate,
    Uploader,
    Image as VanImage,
    ImagePreview,
    NavBar,
    Toast,
    Tag,
    Popover,
    Dialog,
    Calendar,
    Col,
    Picker,
    Popup
  } from 'vant';
  export default {
    name: "edit",
    components: {
      [Dialog.Component.name]: Dialog.Component,
      'van-row': Row,
      'van-field': Field,
      'van-button': Button,
      'van-rate': Rate,
      'van-image': VanImage,
      'van-nav-bar': NavBar,
      'van-tag': Tag,
      'van-popover': Popover,
      'van-calendar': Calendar,
      'van-col': Col,
      'van-form': Form,
      'van-picker': Picker,
      'van-popup': Popup,
      'van-uploader': Uploader
    },
    data: function () {
      return {
        id: 0,
        title: "", //标题,
        description: "", //描述
        level: 0, //等级
        images: [], //图片集合
        endDate: "", //截至日期
        status: 0, //任务状态
        submitRemark: "", //提交的备注信息
        showEndDate: false,
        loading: false,
        appointUserName: '', //指派的用户账号
        columns: [], //指派的用户信息
        showPicker: false, //是否显示选择器
        appointUser: '', //指派的用户名称
      }
    },
    computed: {
      uploadFileList: {
        get() {
          var image = this.images;
          return image.map(item => {
            return {
              url: item
            }
          });
        },
        set() {}
      }
    },
    methods: {
      //确认截至日期
      onConfirmEndDate(date) {
        this.endDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        this.showEndDate = false;
      },
      //返回
      onClickLeft() {
        // this.$router.replace('/list');
        this.$router.go(-1);
      },
      //上传
      async afterread(file) {
        var res = await this.$ajax.uploadFile('/file/upload', file.file);
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        //更新文件
        this.images.push(`${this.$config.baseUrl}${res.data.requestName}${res.data.src}`);
      },
      //提交
      async onSubmit() {
        this.loading = true;
        var res = await this.$ajax.post('/api/task/update', {
          "title": this.title,
          "description": this.description,
          "level": this.level,
          "fileList": this.images,
          "endDate": this.endDate,
          appointUser: this.appointUserName,
          id: this.id
        });
        this.loading = false;
        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          Toast.success('修改成功');
        }
      },
      onConfirmAppointUser(obj) {
        this.appointUserName = obj.value;
        this.appointUser = obj.text;
        this.showPicker = false;
      },
      //确认截至日期
      onConfirmEndDate(date) {
        this.endDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        this.showEndDate = false;
      },
      //加载数据
      async loadData() {
        //获取 任务信息
        var res = await this.$ajax.get(`/api/task/${this.$route.params.id}`);
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        var taskInfo = res.data;
        //赋值
        this.id = taskInfo.id;
        this.title = taskInfo.title;
        this.description = taskInfo.description;
        this.images = taskInfo.imgesList;
        this.level = taskInfo.level;
        this.status = taskInfo.status;
        this.endDate = this.$moment(taskInfo.endDate).format("YYYY-MM-DD");
        this.appointUser = taskInfo.appointName;
        this.appointUserName = taskInfo.appointUser;
      },
      //加载指派的用户数据
      async loadAppointUser() {
        var res = await this.$ajax.get(`/api/organization/user?oid=${ this.$user.getOrganizationId()}`);
        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          this.columns = [...res.data].map(item => {
            return {
              text: item.name,
              value: item.userName,
            }
          });
        }
      }
    },
    async mounted() {
      //显示底部栏
      this.$store.commit('updateShowFoot', false)
      await this.loadData();
      await this.loadAppointUser();
    }
  }

</script>
<style scoped>
  .image_style {
    margin-left: 5px;
  }

</style>
